<template>
    <div class="body">
        <div class="qx">
            <img src="@/assets/imgs/关闭按键.png" alt="" @click="ht">
        </div>
        <div class="bottom">
            <div class="bg">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <th style="color: #004d81;width: 12vw;">项目名称</th>
                        <th colspan="7" style="width: 50vw;">{{ ItemData.projectName }}</th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;line-height: 40px;">投资主体</th>
                        <th colspan="7" style="width: 50vw;line-height: 26px;">{{ ItemData.typeName }}</th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;line-height: 26px;">建设起止年限</th>
                        <th style="width:15.5vw">{{ ItemData.startTime+'-'+ItemData.endTime }}</th>
                        <th style="color: #004d81;width: 5vw;">占地面积</th>
                        <th colspan="3">{{ ItemData.floorSpace+'平方米' }}</th>
                        <th style="color: #004d81;text-indent: -89px;">计划总投资</th>
                        <th>{{ ItemData.money+'元' }}</th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;">年利税</th>
                        <th>{{ ItemData.profitTax }}</th>
                        <th style="color: #004d81;">年产值</th>
                        <th colspan="3">{{ ItemData.money }}</th>
                        <th style="color: #004d81;text-indent: -89px;">用工人数</th>
                        <th>{{ ItemData.num }}</th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;">项目进展情况</th>
                        <th>{{ ItemData.progressName }}</th>
                        <th style="color: #004d81;width: 4vw;">所在区域</th>
                        <th style="width: 10vw;">{{ ItemData.areaName }}</th>
                        <th style="color: #004d81;width:5.5vw">是否开工</th>
                        <th style="width:5vw">{{ ItemData.isStart==0 ? '是':'否' }}</th>
                        <th style="color: #004d81;width: 5.5vw;">项目秘书</th>
                        <th>{{ ItemData.secretary }}</th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;height: 9.5vw;">建设规模及主要建设内容</th>
                        <th colspan="7" v-html="ItemData.content"></th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;height: 4.5vw;">存在问题</th>
                        <th colspan="7">{{ ItemData.problem }}</th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;height: 4.5vw;">解决方案</th>
                        <th colspan="7">{{ ItemData.answer }}</th>
                    </tr>
                    <tr>
                        <th style="color: #004d81;height: 2.5vw;">备注</th>
                        <th colspan="7">{{ ItemData.remark }}</th>
                    </tr>
                </table>
            </div>

            <div class="one">
                <div class="one1" v-for="item,index in ItemData.imgList" :key="index">
                    <div class="one_1">
                        <p style="text-align: left;">{{ ItemData.projectName }}</p>
                        <img v-show="index<4" :src="'http://139.224.69.209'+item" alt="">
                        <p style="text-align: right;">{{ ItemData.startTime }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useStore } from 'vuex';
import { onMounted, defineProps } from 'vue'
const store = useStore()
const ht = () => {
    store.commit('tcupdataa2', 0)
}

const { ItemData } = defineProps(['ItemData'])

onMounted(() => {
    console.log(ItemData);
})


</script>
<style scoped>
.body {
    z-index: 9999;
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: #f0f0f0;
    top: 7vw;
    left: 15vw;
    background-image: url(@/assets/imgs/qktcbj.png);
    background-size: 100% 100%;
}

.qx {
    width: 100%;
    height: 5%;
    text-align: right;
    margin-top: 1vw;
}

.bottom {
    width: 100%;
    height: 90%;
    display: flex;
    margin: 1vw;
    box-sizing: border-box;
}

.bg {
    width: 83%;
    height: 90%;
    background-image: url(@/assets/imgs/qktcbg.png);
    background-size: 100% 100%;
}

table {
    width: 100%;
    height: 100%;
}

tr {
    height: 5.5%;
}

.one {
    width: 12%;
    height: 90%;
    margin-left: 2vw;
    overflow: hidden;
}

.one1 {
    background-image: url(@/assets/imgs/qktctp.png);
    background-size: 100% 100%;
    width: 100%;
    height: 24%;
    color: #fff;
    font-size: 0.1vw;
    margin-bottom: 3%;
}

.one_1 {
    width: 90%;
    height: 90%;
    padding: 4%;
}

.one1 img {
    width: 100%;
    height: 70%;
    margin: 1% 0;
}
</style>